<template>
  <div
    id="layerControl_zw"
    class="data-table layer-data-macro"
    @mousedown="mousedown"
    @click.stop
    :style="'position:fixed;left:'+left+'px;top:'+top+'px;'"
  >
    <div class="add-container">
      <el-popover
        class="layerPopule"
        placement="bottom-end"
        title="添加专题图"
        width="320"
        trigger="click"
        v-model="showAdd"
      >
        <div class="select">
          <el-select v-model="chartType" placeholder="请选择专题图类型" size="mini">
            <el-option
              v-for="(item,index) in chartContainer"
              :key="index"
              :label="item.name"
              :value="item.type"
              v-show="allLayer.indexOf(item.type) == -1"
            >
              <span style="float: left;font-size:12px">{{ item.name }}</span>
            </el-option>
          </el-select>
        </div>
        <div
          class="select select-idenList"
          v-show="chartType == 'pie' || chartType == 'bar' || chartType =='rosediagram' || chartType=='circulargraph'"
        >
          <el-select
            v-model="chooseIden"
            :popper-append-to-body="false"
            placeholder="请选择指标"
            size="mini"
            multiple
            collapse-tags
          >
            <el-option
              v-for="(iden,idenindex) in layerFullIdens"
              :key="idenindex"
              :label="iden.name"
              :value="iden.id"
            >
              <span style="float: left;font-size:12px">
                <span v-show="iden.isGroupValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                {{ iden.name }}
              </span>
            </el-option>
          </el-select>
        </div>
        <div
          class="select"
          v-show="chartType != 'pie' && chartType != 'bar' && chartType !='rosediagram' && chartType!='circulargraph'"
        >
          <el-select
            v-model="chooseIdenVal"
            :popper-append-to-body="false"
            placeholder="请选择指标"
            size="mini"
          >
            <el-option
              v-for="(iden,idenindex) in layerFullIdens"
              :key="idenindex"
              :label="iden.name"
              :value="iden.id"
            >
              <span style="float: left;font-size:12px">
                <span v-show="iden.isGroupValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                {{ iden.name }}
              </span>
            </el-option>
          </el-select>
        </div>
        <div class="creat_btn">
          <el-button size="mini" class="cancel" type="text" @click="showAdd = false">取消</el-button>
          <el-button type="primary" class="creat-btn" size="mini" @click="creatTypeLayer">创建</el-button>
        </div>
        <i class="el-icon-plus addLayer" slot="reference" title="添加专题图"></i>
      </el-popover>
    </div>
    <div class="title">
      <span>选择底图</span>
      <i class="close el-icon-close" @click.stop="close"></i>
      <!-- <i class="close el-icon-zoom-in"></i> -->
    </div>
    <ul class="base-layer-layers">
      <li
        v-for="(item,index) in baseLayers"
        :key="index"
        @click.stop="switchLayer(item)"
        @mousedown="stopCapture"
      >
        <img :src="mapbg[index]" width="64px" :class="{'layer-status':item.curLayer}" />
        <div :class="{'text':true,'text-status':item.curLayer}">{{item.layerName}}</div>
      </li>
    </ul>
    <!-- 分割线-------------------分割线---------------分割线 -->
    <div style="padding:0 5px">
      <div class="other-title" @click.stop="overLayersListVisible=!overLayersListVisible">
        专题图
        <div class="other-title-btn">
          <i class="el-icon-arrow-right" v-if="!overLayersListVisible"></i>
          <i class="el-icon-arrow-down" v-if="overLayersListVisible"></i>
        </div>
      </div>
      <ul class="other-layer-layers" v-if="overLayersListVisible">
        <el-collapse accordion size="mini">
          <el-collapse-item
            v-for="(item,index) in mapLayers"
            :key="'clusterLayer-'+ index"
            :title="item.name"
            :name="item.name"
          >
            <template slot="title">
              {{item.name}}
              <span class="check-box">
                <i
                  class="iconfont icon-shangyi overlayer-visible"
                  @click.stop="setLayerUp(item,index,true)"
                  v-if="false"
                ></i>
                <i
                  class="iconfont icon-xiayi overlayer-visible"
                  @click.stop="setLayerUp(item,index,false)"
                  v-if="false"
                ></i>
                <i
                  class="iconfont icon-yanjing overlayer-visible"
                  @click.stop="setOverLayerHidden(item,index)"
                  v-if="!item.hidden"
                ></i>
                <i
                  class="iconfont icon-biyanjing overlayer-visible"
                  @click.stop="setOverLayerVisible(item,index)"
                  v-if="item.hidden"
                ></i>
                <i
                  class="el-icon-delete-solid overlayer-visible"
                  @click.stop="removeLayers(item,index)"
                ></i>
              </span>
            </template>

            <el-select
              v-if="typeof item.ident == 'object'"
              v-model="item.ident"
              placeholder="请选择指标"
              :popper-append-to-body="false"
              size="mini"
              multiple
              collapse-tags
              @change="changeIdens(item)"
            >
              <el-option
                v-for="(iden,idenindex) in layerFullIdens"
                :key="idenindex"
                :label="iden.name"
                :value="iden.id"
              >
                <span style="float: left;font-size:12px">
                  <span v-show="iden.isGroupValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  {{ iden.name }}
                </span>
              </el-option>
            </el-select>
            <el-select
              v-if="typeof item.ident == 'string'"
              v-model="item.ident"
              placeholder="请选择指标"
              :popper-append-to-body="false"
              size="mini"
              @change="changIden(item)"
            >
              <el-option
                v-for="(iden,idenindex) in layerFullIdens"
                :key="idenindex"
                :label="iden.name"
                :value="iden.id"

              >
                <span style="float: left;font-size:12px">
                  <span v-show="iden.isGroupValue">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  {{ iden.name }}
                </span>
              </el-option>
            </el-select>
          </el-collapse-item>
        </el-collapse>
      </ul>
    </div>
    <!-- 分割线-------------------分割线---------------分割线 -->
    <!-- <div @mousedown="stopCapture" style="padding:0 5px">
      <div class="other-title line-top" @click="opacitySliderVisible=!opacitySliderVisible">
        透明度
        <div class="other-title-btn">
          <i class="el-icon-arrow-right" v-if="!opacitySliderVisible"></i>
          <i class="el-icon-arrow-down" v-if="opacitySliderVisible"></i>
        </div>
      </div>
      <div class="other-layer-layers" style="padding:0 18px 0px 10px" v-if="opacitySliderVisible">
        <el-slider
          v-model="layersOpacity"
          :max="100"
          :min="0"
          :step="1"
          @change="setOverLayersOpacity"
          @mousedown="stopCapture"
        ></el-slider>
      </div>
    </div>-->
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import sgisLayerBase from "@/utils/map/sfgis.layer.base.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import mapTool from "@/utils/map/sfgis.map.tool.js";
import Layer from "@/utils/map/lib/main.js"; // 专题图层绘画函数
import styleModify from "@/utils/map/lib/macrolayers/echarts.stylemodify.js";
import regionLable from "@/utils/map/lib/systemlayers/region.marker.layer";
import { setTimeout } from "timers";
import searchresultData from "../query/searchresult.data.js"; //处理专题图数据格式
import axios from "axios";
import * as macroAPI from "@/pages/macro/api/macro.js";
import microConfig from "static/config/micro.js";
import $ from "jquery";
export default {
  name: "Layers",
  props: [],
  data() {
    return {
      baseLayers: sgisLayerBase.baseLayers,
      overLayersListVisible: false, // 专题图层列表可见性
      overLayers: sgisLayerBase.overLayers, // 获取当前的overLayers个数
      overLayerChangeByCurControl: false, // 记录专题专题图层个数变更原因
      opacitySliderVisible: false, // 透明度滑块是否可见
      layersOpacity: 100, // 专题图层透明度
      otherLegends: [],
      currentLayer: "",
      loadData: null,
      otherVal: "",
      showAdd: false,
      otherArray: [],
      status: {
        isdblclick: false, //是否是双击下钻
        // clusterLayer:false,//聚集图或者热力图是否显示
        isFirstMicroSearch: true, //是否是第一次查询麻点图
        chartType: "clusterLayer" //图形类型
      },
      left: document.documentElement.clientWidth - 410,
      top: 250,
      map: {
        currentZoom: 4 //地图当前等级
      }, //当前地图
      chartIndex: 0,
      microSearchParams: [], //查询结果所有条件
      selectedSearchParams: {}, //当前选中结果条件
      overLayerData: {
        clusterLayer: [],
        pockingLayer: [],
        heatLayer: []
      },
      //数字指标
      numIden: [
        {
          value: "单位数量",
          label: ""
        }
      ],
      selectedIdenValue: "", //选中指标值
      handle: {
        item: {} //操作的目标结果
      },
      layerFullIdens: [],
      collapseactiveName: "", //折叠面板打开层
      checkedIdens: [], //已经选择过得指标
      mapbg: [
        "static/images/map-bg/map-bg-1.png",
        "static/images/map-bg/map-bg-2.png",
        "static/images/map-bg/map-bg-3.png"
      ], //底图背景
      isCreateChart: [],
      chartType: "", //创建专题图的类型
      chooseIden: [], //当前选择创建的指标
      chooseIdenVal: "",
      idenThemerange: [],//指标
      chartContainer: [
        {
          type: "themerange",
          name: "分段专题图3D"
        },
        {
          type: "rangeThemeLayer",
          name: "分段专题图2D"
        },
        {
          type: "bar",
          name: "柱状图"
        },
        {
          type: "pie",
          name: "饼状图"
        },
        {
          type: "pictogram",
          name: "象形图"
        },
        {
          type: "gradesymbol",
          name: "等级符号图"
        },
        {
          type: "rosediagram",
          name: "玫瑰图"
        },
        {
          type: "circulargraph",
          name: "环形图"
        },
        {
          type: "ranking",
          name: "排名图"
        }
      ]
    };
  },
  mounted() {
    this.initEvent();
  },
  computed: {
    mapLayers: {
      get() {
        return this.$store.state.macro.mapLayers;
      },
      set(val) {
        // this.$store.commit("getMapLayers", val);
      }
    },
    ...mapState({
      currentLayerIdenValue: state => state.macro.currentLayerIdenValue,
      currentLayerCode: state => state.macro.currentLayerCode,
      layerIdens: state => state.macro.layerIdens,
      currentIdens: state => state.macro.currentIdens,
      currentLayerCode: state => state.macro.currentLayerCode,
      currentYearMonth: state => state.macro.currentYearMonth,
      regionCodeArray: state => state.macro.regionCodeArray,
      periodType: state => state.macro.periodType,
      currentRegionXY: state => state.macro.currentRegionXY,
      barLayerIden: state => state.macro.barLayerIden,
      allLayer: state => state.macro.allLayer,
      themerangeIden: state => state.macro.themerangeIden,
      showMapControl: state => state.macro.showMapControl
    })
  },
  watch: {
    showMapControl(now, old) {
      if (!now) {
        this.showAdd = false;
      }
    }
  },
  methods: {
    initEvent() {
      EventBus.$on("formateTableData-spatialAnalysis", this.formateSelectData);
      EventBus.$on("iden-change", this.getNewIden);
      EventBus.$on(
        "formateChangeCurrentData-spatialAnalysis",
        this.changeFormateData
      );
      EventBus.$on("clearSearchResult", this.clearAll);
      EventBus.$on("clearSearchBeafule", this.clearAll);

      EventBus.$on("currentLayerHidden", this.getLayerHidden);
    },
    clearLegends() {
      this.$emit("getOtherLegendHidden", []);
    },
    getLayerHidden(type) {
      if (sgisMapBase.map.overlayerInfos[type].hidden) {
        this.setOverLayerHidden(sgisMapBase.map.overlayerInfos[type]);
      } else {
        this.setOverLayerVisible(sgisMapBase.map.overlayerInfos[type]);
      }
    },
    changeFormateData(data) {
      if (data && Object.keys(data.formateData.formatValue).length) {
        this.loadData = data;
        this.mapLayers.map((item, i) => {
          if (sgisMapBase.map.overlayers[item.type]) {
            if (item.type != "themerange") {
              if (!item.hidden) {
                if (
                  item.type == "bar" ||
                  item.type == "pie" ||
                  item.type == "rosediagram" ||
                  item.type == "circulargraph"
                ) {
                  this.addNewLayer(item.type, item.ident);
                } else {
                  this.creatChart(item.type, item.ident);
                }
              }
            } else if (item.type == "themerange") {
              this.mapLayers.map((layer, index) => {
                if (sgisMapBase.map.overlayers[layer.type]) {
                  if (layer.type == "themerange") {
                    layer["ident"] = this.themerangeIden;
                    if (layer.hidden) {
                      this.setOverLayerHidden(
                        sgisMapBase.map.overlayerInfos["themerange"],
                        index
                      );
                    } else {
                      this.setOverLayerVisible(
                        sgisMapBase.map.overlayerInfos["themerange"],
                        index
                      );
                    }
                  }
                }
              });
            }
          }
        });
      } else {
        const map = sgisMapBase.getMap();
        //删除符号图的图层
        if (
          map.overlayers["pictogram"] &&
          map.overlayers["pictogram"] != "layer"
        ) {
          map.overlayers["pictogram"][0].remove();
          map.overlayers["pictogram"] = "layer";
        }
        //删除象形图的图层
        if (
          map.overlayers["gradesymbol"] &&
          map.overlayers["gradesymbol"] != "layer"
        ) {
          map.overlayers["gradesymbol"][0].remove();
          map.overlayers["gradesymbol"] = "layer";
        }
        //删除排名图
        if (map.overlayers["ranking"] && map.overlayers["ranking"] != "layer") {
          map.overlayers["ranking"][0].remove();
          map.overlayers["ranking"] = "layer";
        }
        if (map.overlayers["rangeThemeLayer"]) {
          if (map.overlayers["rangeThemeLayer"].features.length) {
            map.overlayers["rangeThemeLayer"].display(false);
          }
        }

        $(".bar_chart").remove();

        $(".pie_chart").remove();

        $(".rosediagram_chart").remove();

        $(".circulargraph_chart").remove();
      }
    },
    clearAll() {
      //删除图例
      this.layerFullIdens = [];
      this.idenThemerange = [];
      this.$emit("getOtherLegendHidden", []);
    },
    // 创建专题图
    creatTypeLayer() {
      if (this.chooseIden.length && this.chartType) {
        this.$store.commit("getBarLayerIden", this.chooseIden);
        this.addNewLayer(this.chartType, this.chooseIden);
        this.showAdd = false;
        this.chooseIden = [];
        this.chartType = "";
      } else if (this.chooseIdenVal && this.chartType) {
        this.creatChart(this.chartType, this.chooseIdenVal);
        this.idenThemerange = [];
        this.layerFullIdens.map(item => {
          if (item.id == this.chooseIdenVal) {
            this.$store.commit("changCurrentIdenName", {
              type: this.chartType,
              value: item.name
            });
          }
        });
        this.mapLayers.map((item, index) => {
          if (item.type == this.chartType) {
            item["ident"] = this.chooseIdenVal;
            this.showAdd = false;
            this.chartType = "";
            this.chooseIdenVal = "";
          }
          if (item["ident"]) {
            this.idenThemerange.push(item["ident"]);
          }
        });
      } else {
        this.$message({
          message: "请选择指标及专题图",
          type: "warning"
        });
      }
    },
    creatChart(type, iden) {
      let map = sgisMapBase.getMap();
      switch (type) {
        case "themerange":
          EventBus.$emit("creatThemerange", { iden, data: this.loadData });
          if(sgisMapBase.map.overlayerInfos["themerange"]){
            this.setOverLayerVisible(
              sgisMapBase.map.overlayerInfos["themerange"]
            );
          }
          break;
        case "pictogram":
          let pictogramData = {
            name: "象形图",
            image: "",
            id: "pictogram",
            show: true,
            html: "<div>test</div>",
            data: []
          };
          this.currentRegionXY.map(item => {
            let chary = {};
            if (iden.split("_")[1]) {
              let key = `${item.code}-${iden.split("_")[0]}-${
                iden.split("_")[1]
              }-${this.periodType}-${iden.split("_")[0]}-${
                iden.split("_")[1]
              }-${this.currentYearMonth}`;
              if (this.loadData.formateData.formatValue[key]) {
                chary.name = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}-${this.loadData.formateData.formatValue[key].ident_name_hierarchical}`;
                chary.region = this.loadData.formateData.formatValue[
                  key
                ].region_code;
                chary.value = [
                  item.x,
                  item.y,
                  this.loadData.formateData.formatValue[key].value
                ];
                pictogramData.data.push(chary);
              }
            } else {
              let key = `${item.code}-${iden.split("_")[0]}-${item.code}-${
                this.periodType
              }-${iden.split("_")[0]}-${item.code}-${this.currentYearMonth}`;
              if (this.loadData.formateData.formatValue[key]) {
                chary.name = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}`;
                chary.region = this.loadData.formateData.formatValue[
                  key
                ].region_code;
                chary.value = [
                  item.x,
                  item.y,
                  this.loadData.formateData.formatValue[key].value
                ];
                pictogramData.data.push(chary);
              }
            }
          });
          this.creatChartLayers("pictogram", pictogramData, iden);
          break;
        case "gradesymbol":
          let gradesymbolData = {
            name: "等级符号图",
            image: "static/images/marker_blue.png",
            id: "gradesymbol",
            show: true,
            html: "<div>test</div>",
            data: []
          };
          this.currentRegionXY.map(item => {
            let chary = {};
            if (iden.split("_")[1]) {
              let key = `${item.code}-${iden.split("_")[0]}-${
                iden.split("_")[1]
              }-${this.periodType}-${iden.split("_")[0]}-${
                iden.split("_")[1]
              }-${this.currentYearMonth}`;
              if (this.loadData.formateData.formatValue[key]) {
                chary.name = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}-${this.loadData.formateData.formatValue[key].ident_name_hierarchical}`;
                chary.region = this.loadData.formateData.formatValue[
                  key
                ].region_code;
                chary.value = [
                  item.x,
                  item.y,
                  this.loadData.formateData.formatValue[key].value
                ];
                gradesymbolData.data.push(chary);
              }
            } else {
              let key = `${item.code}-${iden.split("_")[0]}-${item.code}-${
                this.periodType
              }-${iden.split("_")[0]}-${item.code}-${this.currentYearMonth}`;
              if (this.loadData.formateData.formatValue[key]) {
                chary.name = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}`;
                chary.region = this.loadData.formateData.formatValue[
                  key
                ].region_code;
                chary.value = [
                  item.x,
                  item.y,
                  this.loadData.formateData.formatValue[key].value
                ];
                gradesymbolData.data.push(chary);
              }
            }
          });
          this.creatChartLayers("gradesymbol", gradesymbolData, iden);
          break;
        case "ranking":
          let rankingData = {
            name: "排名图",
            image: "static/images/marker_blue.png",
            id: "ranking",
            show: true,
            html: "<div>test</div>",
            data: []
          };
          this.currentRegionXY.map(item => {
            let chary = {};
            if (iden.split("_")[1]) {
              let key = `${item.code}-${iden.split("_")[0]}-${
                iden.split("_")[1]
              }-${this.periodType}-${iden.split("_")[0]}-${
                iden.split("_")[1]
              }-${this.currentYearMonth}`;
              if (this.loadData.formateData.formatValue[key]) {
                chary.name = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}-${this.loadData.formateData.formatValue[key].ident_name_hierarchical}`;
                chary.region = this.loadData.formateData.formatValue[
                  key
                ].region_code;
                chary.value = [
                  item.x,
                  item.y,
                  this.loadData.formateData.formatValue[key].value
                ];
                rankingData.data.push(chary);
              }
            } else {
              let key = `${item.code}-${iden.split("_")[0]}-${item.code}-${
                this.periodType
              }-${iden.split("_")[0]}-${item.code}-${this.currentYearMonth}`;
              if (this.loadData.formateData.formatValue[key]) {
                chary.name = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}`;
                chary.region = this.loadData.formateData.formatValue[
                  key
                ].region_code;
                chary.value = [
                  item.x,
                  item.y,
                  this.loadData.formateData.formatValue[key].value
                ];
                rankingData.data.push(chary);
              }
            }
          });
          this.creatChartLayers("ranking", rankingData, iden);
          break;
        case "rangeThemeLayer":
          if (map.overlayers["rangeThemeLayer"]) {
            if (map.overlayers["rangeThemeLayer"].features.length) {
              map.overlayers["rangeThemeLayer"].display(true);
              EventBus.$emit("creatRangeThemeLayer", {
                iden,
                data: this.loadData,
                ischange: true
              });
            } else {
              EventBus.$emit("creatRangeThemeLayer", {
                iden,
                data: this.loadData,
                ischange: false
              });
            }
          } else {
            EventBus.$emit("creatRangeThemeLayer", {
              iden,
              data: this.loadData,
              ischange: false
            });
          }
          break;
        default:
          break;
      }
    },
    //添加新专题图
    addNewLayer(type, idens) {
      switch (type) {
        case "bar":
          let barData = {
            id: "bar", // 专题图的id
            name: "柱状图", // 专题图的名称
            showThumbnails: true,
            datas: []
          };
          //计算选中指标所有年份最大值、最小值
          let arr = [],mindata=0,maxdata=0;
          let data = this.loadData.formateData.formatValue;
          for(let i in data){
            idens.map(iden => {
              if(i.indexOf(iden)!=-1){
                if(Number(data[i].value)){
                  arr.push(Number(data[i].value));
                }
              }
            })
          }
          maxdata = Math.max.apply(null, arr);
          mindata = Math.min.apply(null, arr);
          this.currentRegionXY.map(item => {
            let sdata = [];
            let xAxis = [];
            idens.map(iden => {
              if (iden.split("_")[1]) {
                let key = `${item.code}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.periodType}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  sdata.push(this.loadData.formateData.formatValue[key].value);
                  xAxis.push(
                    `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}-${this.loadData.formateData.formatValue[key].ident_name_hierarchical}`
                  );
                }
              } else {
                let key = `${item.code}-${iden.split("_")[0]}-${item.code}-${
                  this.periodType
                }-${iden.split("_")[0]}-${item.code}-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  sdata.push(this.loadData.formateData.formatValue[key].value);
                  xAxis.push(
                    this.loadData.formateData.formatValue[key]
                      .iden_name_hierarchical
                  );
                }
              }
            });

            barData.datas.push({
              mindata:mindata||0,
              maxdata:maxdata||0,
              id: item.id,
              name: item.name,
              regioncode: item.code,
              regionname: item.name,
              datas: {
                sdata: [
                  {
                    name: item.name,
                    type: "bar",
                    // barWidth: "40%",
                    // barWidth:'30',
                    data: sdata,
                    barCategoryGap:'5'
                  }
                ],
                xAxis: xAxis
              },
              lon: item.x,
              lat: item.y
            });
          });
          this.creatChartLayers("bar", barData, idens);
          break;
        case "pie":
          let pieData = {
            id: "pie", // 专题图的id
            name: "饼状图", // 专题图的名称
            showThumbnails: true,
            data: []
          };
          this.currentRegionXY.map(item => {
            let pData = [];
            idens.map(iden => {
              if (iden.split("_")[1]) {
                let key = `${item.code}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.periodType}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  let pDataItem = { value: 0, name: "" };
                  pDataItem.value = this.loadData.formateData.formatValue[
                    key
                  ].value;
                  pDataItem.name = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}-${this.loadData.formateData.formatValue[key].ident_name_hierarchical}`;
                  pData.push(pDataItem);
                }
              } else {
                let key = `${item.code}-${iden.split("_")[0]}-${item.code}-${
                  this.periodType
                }-${iden.split("_")[0]}-${item.code}-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  let pDataItem = { value: 0, name: "" };
                  pDataItem.value = this.loadData.formateData.formatValue[
                    key
                  ].value;
                  pDataItem.name = this.loadData.formateData.formatValue[
                    key
                  ].iden_name_hierarchical;
                  pData.push(pDataItem);
                }
              }
            });
            pieData.data.push({
              id: item.id,
              name: item.name,
              regioncode: item.code,
              regionname: item.name,
              data: pData,
              lon: item.x,
              lat: item.y
            });
          });
          this.creatChartLayers("pie", pieData, idens);
          break;
        case "rosediagram":
          let rosediagramData = {
            id: "rosediagram", // 专题图的id
            name: "玫瑰图", // 专题图的名称
            showThumbnails: true,
            data: []
          };
          this.currentRegionXY.map(item => {
            let servies = [];
            idens.map(iden => {
              let data = {};
              if (iden.split("_")[1]) {
                let key = `${item.code}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.periodType}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  data["value"] = this.loadData.formateData.formatValue[
                    key
                  ].value;
                  data[
                    "name"
                  ] = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}-${this.loadData.formateData.formatValue[key].ident_name_hierarchical}`;
                  servies.push(data);
                }
              } else {
                let key = `${item.code}-${iden.split("_")[0]}-${item.code}-${
                  this.periodType
                }-${iden.split("_")[0]}-${item.code}-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  data["value"] = this.loadData.formateData.formatValue[
                    key
                  ].value;
                  data["name"] = this.loadData.formateData.formatValue[
                    key
                  ].iden_name_hierarchical;
                  servies.push(data);
                }
              }
            });

            rosediagramData.data.push({
              id: item.id,
              name: item.name,
              regioncode: item.code,
              regionname: item.name,
              datas: servies,
              lon: item.x,
              lat: item.y
            });
          });
          this.creatChartLayers("rosediagram", rosediagramData, idens);
          break;
        case "circulargraph":
          let circulargraphData = {
            id: "circulargraph", // 专题图的id
            name: "环形图", // 专题图的名称
            showThumbnails: true,
            data: []
          };
          this.currentRegionXY.map(item => {
            let servies = [];
            idens.map(iden => {
              let data = {};
              if (iden.split("_")[1]) {
                let key = `${item.code}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.periodType}-${iden.split("_")[0]}-${
                  iden.split("_")[1]
                }-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  data["value"] = this.loadData.formateData.formatValue[
                    key
                  ].value;
                  data[
                    "name"
                  ] = `${this.loadData.formateData.formatValue[key].iden_name_hierarchical}-${this.loadData.formateData.formatValue[key].ident_name_hierarchical}`;
                  servies.push(data);
                }
              } else {
                let key = `${item.code}-${iden.split("_")[0]}-${item.code}-${
                  this.periodType
                }-${iden.split("_")[0]}-${item.code}-${this.currentYearMonth}`;
                if (this.loadData.formateData.formatValue[key]) {
                  data["value"] = this.loadData.formateData.formatValue[
                    key
                  ].value;
                  data["name"] = this.loadData.formateData.formatValue[
                    key
                  ].iden_name_hierarchical;
                  servies.push(data);
                }
              }
            });

            circulargraphData.data.push({
              id: item.id,
              name: item.name,
              regioncode: item.code,
              regionname: item.name,
              datas: servies,
              lon: item.x,
              lat: item.y
            });
          });
          this.creatChartLayers("circulargraph", circulargraphData, idens);
          break;
        default:
          break;
      }
    },
    //删除专题图
    removeLayers(layer, index) {
      if (layer.type == "themerange") {
        sgisMapBase.map.overlayers["themerange"].remove();
      } else if (layer.type == "bar") {
        $(".bar_chart").remove();
      } else if (layer.type == "pie") {
        $(".pie_chart").remove();
      } else if (layer.type == "pictogram") {
        sgisMapBase.map.overlayers["pictogram"][0].remove();
      } else if (layer.type == "gradesymbol") {
        sgisMapBase.map.overlayers["gradesymbol"][0].remove();
      } else if (layer.type == "rosediagram") {
        $(".rosediagram_chart").remove();
      } else if (layer.type == "circulargraph") {
        $(".circulargraph_chart").remove();
      } else if (layer.type == "ranking") {
        sgisMapBase.map.overlayers["ranking"][0].remove();
      } else if (layer.type == "rangeThemeLayer") {
        sgisMapBase.map.overlayers["rangeThemeLayer"].removeFromMap();
      }
      this.mapLayers.map((item, index) => {
        if (item.type == layer.type) {
          this.mapLayers.splice(index, 1);
        }
      });
      for (const key in this.otherLegends) {
        const item = this.otherLegends[key];
        if (item.layerId === layer.layerId) {
          this.otherLegends.splice(key, 1);
          break;
        }
      }
      this.$emit("getOtherLegendHidden", this.otherLegends);
      this.$store.commit("deletLayer", layer.type);
      delete sgisMapBase.map.overlayers[layer.type];
      delete sgisMapBase.map.overlayerInfos[layer.type];
      this.idenThemerange = [];
      this.mapLayers.map((item, index) => {
        if (item["ident"]) {
          this.idenThemerange.push(item["ident"]);
        }
      });
    },
    creatChartLayers(type, data, iden) {
      let timeChange = false;
      let map = sgisMapBase.getMap();
      switch (type) {
        case "bar":
          let barLayerInfo = Layer.barLayer.createLayer(map, data, layer => {
            this.mapLayers.map(item => {
              if (item.type == layer.type) {
                item["ident"] = iden;
                if (item["hidden"]) {
                  this.$store.commit("addLayer", type);
                  this.setOverLayerHidden(
                    sgisMapBase.map.overlayerInfos["bar"]
                  );
                } else {
                  this.$store.commit("addLayer", type);
                  this.setOverLayerVisible(
                    sgisMapBase.map.overlayerInfos["bar"]
                  );
                }
              }
            });
            timeChange = true;
            EventBus.$emit("timechange-awite", timeChange);
          });
          break;
        case "pie":
          let pieLayerInfo = Layer.pieLayer.createLayer(map, data, layer => {
            this.mapLayers.map(item => {
              if (item.type == layer.type) {
                item["ident"] = iden;
                if (item["hidden"]) {
                  this.$store.commit("addLayer", type);
                  this.setOverLayerHidden(
                    sgisMapBase.map.overlayerInfos["pie"]
                  );
                } else {
                  this.$store.commit("addLayer", type);
                  this.setOverLayerVisible(
                    sgisMapBase.map.overlayerInfos["pie"]
                  );
                }
              }
            });
            timeChange = true;
            EventBus.$emit("timechange-awite", timeChange);
          });
          break;
        case "rosediagram":
          let rosediagramLayerInfo = Layer.rosediagramLayer.createLayer(
            map,
            data,
            layer => {
              this.mapLayers.map(item => {
                if (item.type == layer.type) {
                  item["ident"] = iden;
                  if (item["hidden"]) {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerHidden(
                      sgisMapBase.map.overlayerInfos["rosediagram"]
                    );
                  } else {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerVisible(
                      sgisMapBase.map.overlayerInfos["rosediagram"]
                    );
                  }
                }
              });
              timeChange = true;
              EventBus.$emit("timechange-awite", timeChange);
            }
          );
          break;
        case "circulargraph":
          let circulargraphLayerInfo = Layer.circulargraphLayer.createLayer(
            map,
            data,
            layer => {
              this.mapLayers.map(item => {
                if (item.type == layer.type) {
                  item["ident"] = iden;
                  if (item["hidden"]) {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerHidden(
                      sgisMapBase.map.overlayerInfos["circulargraph"]
                    );
                  } else {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerVisible(
                      sgisMapBase.map.overlayerInfos["circulargraph"]
                    );
                  }
                }
              });
              timeChange = true;
              EventBus.$emit("timechange-awite", timeChange);
            }
          );
          break;
        case "pictogram":
          let pictogramlayerInfo = Layer["pictogramLayer"].createLayer(
            map,
            data,
            layer => {
              this.mapLayers.map(item => {
                if (item.type == layer.type) {
                  item["ident"] = iden;
                  let currentLayerIden = {
                    type: "pictogramLayer",
                    iden: iden
                  };
                  if (item["hidden"]) {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerHidden(
                      sgisMapBase.map.overlayerInfos["pictogram"]
                    );
                  } else {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerVisible(
                      sgisMapBase.map.overlayerInfos["pictogram"]
                    );
                  }
                  this.$store.commit("getMapLayeriden", currentLayerIden);
                }
                timeChange = true;
                EventBus.$emit("timechange-awite", timeChange);
              });
            }
          );
          break;
        case "gradesymbol":
          let gradesymbollayerInfo = Layer["gradesymbol"].createLayer(
            map,
            data,
            layer => {
              this.mapLayers.map(item => {
                if (item.type == layer.type) {
                  item["ident"] = iden;
                  let currentLayerIden = {
                    type: "gradesymbol",
                    iden: iden
                  };
                  if (item["hidden"]) {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerHidden(
                      sgisMapBase.map.overlayerInfos["gradesymbol"]
                    );
                  } else {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerVisible(
                      sgisMapBase.map.overlayerInfos["gradesymbol"]
                    );
                  }
                  this.$store.commit("getMapLayeriden", currentLayerIden);
                }
                timeChange = true;
                EventBus.$emit("timechange-awite", timeChange);
              });
            }
          );
          break;
        case "ranking":
          let maxRank = 5;
          var compare = function(obj1, obj2) {
            var val1 = obj1.value[2];
            var val2 = obj2.value[2];
            return val2 - val1;
          };
          data.data = data.data.sort(compare);
          if (data.data.length > maxRank) {
            data.data = data.data.slice(0, maxRank);
          }
          let rankinglayerInfo = Layer["ranking"].createLayer(
            map,
            data,
            layer => {
              this.mapLayers.map(item => {
                if (item.type == layer.type) {
                  item["ident"] = iden;
                  let currentLayerIden = {
                    type: "ranking",
                    iden: iden
                  };
                  if (item["hidden"]) {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerHidden(
                      sgisMapBase.map.overlayerInfos["ranking"]
                    );
                  } else {
                    this.$store.commit("addLayer", type);
                    this.setOverLayerVisible(
                      sgisMapBase.map.overlayerInfos["ranking"]
                    );
                  }
                  this.$store.commit("getMapLayeriden", currentLayerIden);
                }
                timeChange = true;
                EventBus.$emit("timechange-awite", timeChange);
              });
            }
          );
          break;
      }
    },
    //接收指标参数
    formateSelectData(data) {
      this.loadData = data;
      this.layerFullIdens = [];
      this.currentIdens.map(item => {
        this.layerFullIdens.push({
          id: item.idenCode,
          idenCode: item.idenCode,
          name: item.idenName,
          isGroupValue: false
        });
        let req = {
          iden_code: item.idenCode
        };
        macroAPI
          .idenGroupList(req)
          .then(res => {
            if (res.message == "success") {

              this.layerIdens.map(idenGroup => {
                if (item.idenCode == idenGroup.idenCode) {
                  for (let i = 0; i < idenGroup.data.length; i++) {
                    for (let j = 0; j < res.data.length; j++) {
                      if (idenGroup.data[i] == res.data[j].code) {
                        this.layerFullIdens.map((list,index) =>{//防止顺序乱掉
                          if(list.id == item.idenCode){
                            this.layerFullIdens.splice((index+1),0,{
                              id: item.idenCode + "_" + res.data[j].code,
                              idenCode: res.data[j].code,
                              name: item.idenName + "-" + res.data[j].name,
                              isGroupValue: true
                            })
                          }
                        })
                      }
                    }
                  }
                }
              });
              this.layerFullIdens = this.layerFullIdens.filter(
                (x, index, self) => {
                  var arrids = [];
                  this.layerFullIdens.forEach((item, i) => {
                    arrids.push(item.id);
                  });
                  return arrids.indexOf(x.id) === index;
                }
              );
              this.idenThemerange = [];
              this.mapLayers.map((item, index) => {
                if (item["ident"]) {
                  this.idenThemerange.push(item["ident"]);
                }
              });
            } else {
              this.$message({
                message: "暂无数据",
                type: "warning"
              });
            }
          })
          .catch(error => {
            console.log(error);
          });
      });
      //将获取到的数组去重

      let themerangeState = false;
      this.otherLegends = [];
      this.mapLayers.map((layer, index) => {
        if (sgisMapBase.map.overlayers[layer.type]) {
          if (layer.type == "themerange") {
            layer["ident"] = this.currentIdens[0].idenCode;
            if (layer.hidden) {
              this.setOverLayerHidden(
                sgisMapBase.map.overlayerInfos["themerange"],
                index
              );
            } else {
              this.setOverLayerVisible(
                sgisMapBase.map.overlayerInfos["themerange"],
                index
              );
            }
          } else if (
            layer.type == "pie" ||
            layer.type == "bar" ||
            layer.type == "rosediagram" ||
            layer.type == "circulargraph"
          ) {
            if (!layer.hidden) {
              this.addNewLayer(layer.type, layer.ident);
            }
          } else {
            if (!layer.hidden) {
              this.creatChart(layer.type, layer.ident);
            }
          }
        }
      });
    },
    getNewIden(data) {},
    //多选指标切换
    changeIdens(layer) {
      this.mapLayers.map((item, index) => {
        switch (layer.type) {
          case "bar":
            if (item.type == layer.type) {
              item.ident = layer.ident;
              this.$set(this.mapLayers, index, item);
              this.$store.commit("getBarLayerIden", layer.ident);
              this.addNewLayer("bar", layer.ident);
            }
            break;
          case "pie":
            if (item.type == layer.type) {
              item.ident = layer.ident;
              this.$set(this.mapLayers, index, item);
              this.$store.commit("getBarLayerIden", layer.ident);
              this.addNewLayer("pie", layer.ident);
            }
            break;
          case "rosediagram":
            if (item.type == layer.type) {
              item.ident = layer.ident;
              this.$set(this.mapLayers, index, item);
              this.$store.commit("getBarLayerIden", layer.ident);
              this.addNewLayer("rosediagram", layer.ident);
            }
            break;
          case "circulargraph":
            if (item.type == layer.type) {
              item.ident = layer.ident;
              this.$set(this.mapLayers, index, item);
              this.$store.commit("getBarLayerIden", layer.ident);
              this.addNewLayer("circulargraph", layer.ident);
            }
        }
      });
    },
    //切换指标
    changIden(iden) {
      this.otherLegends = [];
      this.idenThemerange = [];
      this.mapLayers.map((item, index) => {
        if (item.type == iden.type) {
          this.$set(this.mapLayers, index, item);
        }
        if (item["ident"]) {
          this.idenThemerange.push(item["ident"]);
        }
      });
      this.currentIdens.map(item => {
        if (item.idenCode == iden.ident.split("_")[0]) {
          EventBus.$emit("iden-change-table", {
            id: item.id,
            idenData: item.idenCode
          });
        }
      });
      this.$store.commit("changCurrentIdenName", {
        type: iden.type,
        value: iden.name
      });
      switch (iden.type) {
        case "themerange":
          this.layerFullIdens.map((item, index) => {
            if (iden.ident == item.id) {
              this.$store.commit("themerangeIden", item.id);
              this.$store.commit("changCurrentIdenName", {
                value: item.name,
                type: "themerange"
              });
              EventBus.$emit("change-layer-data", {
                iden: item.id,
                data: this.loadData
              });
            }
          });
          break;
        case "pictogram":
          this.creatChart("pictogram", iden.ident);
          break;
        case "gradesymbol":
          this.creatChart("gradesymbol", iden.ident);
          break;
        case "ranking":
          this.creatChart("ranking", iden.ident);
          break;
        case "rangeThemeLayer":
          this.layerFullIdens.map((item, index) => {
            if (iden.ident == item.id) {
              this.$store.commit("changCurrentIdenName", {
                value: item.name,
                type: "rangeThemeLayer"
              });
              this.creatChart("rangeThemeLayer", iden.ident);
            }
          });
          break;
        default:
          break;
      }
    },
    mousedown(e) {
      if (e.srcElement.className == "title") {
        document.onmousemove = e2 => {
          this.left = e2.clientX - e.offsetX;
          this.top = e2.clientY - e.offsetY;
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmousedown = null;
        };
      }
    },
    closeInfoWin() {
      this.changeShowDataTable(!this.showDataTable);
    },

    //上下移
    setLayerUp(item, index, isUp) {
      let type = item.type;
      if (isUp) {
        //上移
        if (index === 0) {
          return;
        }
        this.overLayerData[type].splice(index - 1, 0, item);
        this.overLayerData[type].splice(index + 1, 1);
        const chartLayer = sgisMapBase.map.overlayers[item.layerId];
        chartLayer.setZIndexOffsetHasGroup(1, item.layerId, item.type);
      } else {
        //下移
        if (index === this.overLayerData[type].length - 1) {
          return;
        }
        this.overLayerData[type].splice(index, 1);
        this.overLayerData[type].splice(index + 1, 0, item);
        const chartLayer = sgisMapBase.map.overlayers[item.layerId];
        chartLayer.setZIndexOffsetHasGroup(1, item.layerId, item.type);
      }
    },
    setOverLayersOpacity() {
      const opacity = this.layersOpacity / 100;
      if (this.currentLayer) {
        if (this.currentLayer.layer["charts"]) {
          this.currentLayer.layer["charts"].forEach(layerItem => {
            layerItem.echart._dom.style.opacity = opacity;
          });
        } else {
          if (this.currentLayer.layer instanceof Array) {
            this.currentLayer.layer[0]._container.style.opacity = opacity;
          } else if (this.currentLayer.layer.rootCanvas) {
            this.currentLayer.layer.rootCanvas.style.opacity = opacity;
          } else {
            this.currentLayer.layer.canvas.style.opacity = opacity;
          }
        }
      }
    },
    setSelectedStatus(el, item, index) {
      this.overLayerData.forEach(item => {
        item.tryOpacity = false;
      });
      // 设置那条数据可以设置透明度属性
      item.tryOpacity = true;
      this.$set(this.overLayerData, index, item);
      this.overLayers.forEach(layer_item => {
        if (item.layerId == layer_item.layerId && !layer_item.hidden) {
          this.currentLayer = layer_item;
        }
      });
    },
    //展示专题图
    setOverLayerVisible(item, index) {
      let that = this;
      const layerInfo = sgisMapBase.map.overlayerInfos[item.type];
      const layer = sgisMapBase.map.overlayers[item.type];
      if (item.hidden) {
        if (
          item.type == "bar" ||
          item.type == "pie" ||
          item.type == "rosediagram" ||
          item.type == "circulargraph"
        ) {
          this.addNewLayer(item.type, item.ident);
        } else if (item.type != "themerange") {
          this.creatChart(item.type, item.ident);
        }
      }
      item.hidden = false;
      if(layer == "layer"){//阻止报错
        return;
      }
      layer.setVisible("visible");
      this.$set(this.mapLayers, index, item);
      let iscreat = this.otherLegends.some(legend => {
        if (item.type == legend.type) {
          return true;
        }
      });
      if (!iscreat) {
        this.otherLegends.push(layerInfo);
      }
      this.$emit("getOtherLegendVisible", this.otherLegends);
      switch (item.type) {
        case "bar":
          this.mapLayers.map((item, index) => {
            if (item.type == "pie") {
              this.setOverLayerHidden(this.mapLayers[index], index);
            }
          });
          break;
        case "pie":
          this.mapLayers.map((item, index) => {
            if (item.type == "bar") {
              this.setOverLayerHidden(this.mapLayers[index], index);
            }
          });
          break;
        case "themerange":
          this.mapLayers.map((item, index) => {
            if (item.type == "rangeThemeLayer") {
              this.setOverLayerHidden(this.mapLayers[index], index);
            }
          });
          break;
        case "rangeThemeLayer":
          this.mapLayers.map((item, index) => {
            if (item.type == "themerange") {
              this.setOverLayerHidden(this.mapLayers[index], index);
            }
          });
          break;
      }
    },
    //隐藏专题图
    setOverLayerHidden(item, index) {
      let that = this;
      const layerInfo = sgisMapBase.map.overlayerInfos[item.type];
      const layer = sgisMapBase.map.overlayers[item.type];
      if (layer) {
        //该图层已经渲染过
        item.hidden = true;
        layer.setVisible("hidden");
        this.$set(this.mapLayers, index, item);
        for (const key in this.otherLegends) {
          const item = this.otherLegends[key];
          if (item.layerId === layerInfo.layerId) {
            this.otherLegends.splice(key, 1);
            break;
          }
        }
        this.$emit("getOtherLegendHidden", this.otherLegends);
      }
    },
    //切换底图
    switchLayer(item) {
      for (const key in this.baseLayers) {
        this.baseLayers[key].curLayer = false;
        this.$set(this.baseLayers, key, this.baseLayers[key]);
        if (item.layerId === this.baseLayers[key].layerId) {
          this.baseLayers[key].curLayer = true;
          this.$set(this.baseLayers, key, this.baseLayers[key]);
        }
      }
      sgisLayerBase.switchBaseLayer(item.layerId);
    },
    //关闭面板
    close() {
      this.$emit("close");
    },
    //移动结束
    stopCapture(e) {
      e.stopPropagation();
      e.stopImmediatePropagation();
    },
    //移动面板
    move(e) {
      // let odiv = e.target; //获取目标元素
      e.stopPropagation();
      e.stopImmediatePropagation();
      const odiv = document.getElementById("layerControl_zw");
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft;
      const disY = e.clientY - odiv.offsetTop;
      document.onmousemove = e => {
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const left = e.clientX - disX;
        const top = e.clientY - disY;

        // 绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        // 移动当前元素
        odiv.style.position = "absolute";
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = e => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  }
};
</script>

<style rel='stylesheet' lang='scss' scoped>
@import "./../css/rule.scss";
$activeColor: #eaf1fb;
.select {
  margin-bottom: 10px;
}
.creat-btn {
  background: rgb(29, 156, 183);
  color: #fff;
}
.cancel {
  color: #fff;
}
.creat_btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.data-table {
  position: absolute;
  top: 250px;
  /*right: 46px;*/
  width: 360px;
  height: 300px;
  font-size: 1.4rem;
  background: $fontColorW;
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  .add-container {
    position: absolute;
    right: 6px;
    bottom: 6px;
  }
  .addLayer {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
  }
  .title {
    height: 35px;
    background: $backGroundColor;
    font-size: 1.6rem;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    .close {
      float: right;
      line-height: 35px;
      margin-right: 8px;
      cursor: pointer;
    }
  }
  .data-table .other-layer-layers {
    overflow: hidden;
  }
  ul.base-layer-layers {
    padding: 5px 0;
    margin: 0;
    border-top: 1px solid $borderColor;
    border-bottom: 1px solid $borderColor;
    li {
      list-style: none;
      display: inline-block;
      width: 90px;
      cursor: pointer;
      text-align: center;
      .text {
        width: 100%;
        font-size: 12px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .layer-status {
        border: 2px solid $borderColorActive;
      }
      .text-status {
        color: $borderColorActive;
      }
    }
  }
  .other-title {
    padding: 5px 15px 5px 5px;
    cursor: pointer;
    .other-title-btn {
      float: right;
    }
  }
  .line-top {
    border-top: 1px solid $borderColor;
  }
  .other-layer-layers {
    margin: 0;
    padding: 0;
    max-height: 130px;
    height: 90px;
    overflow-x: hidden;
    overflow-y: auto;
    li {
      list-style: none;
      color: $fontColorLimit;
      font-size: 13px;
      line-height: 29px;
      padding-left: 10px;
      position: relative;
      .check-box {
        float: right;
        cursor: pointer;
        margin-right: 40px;
        line-height: 29px;
        position: absolute;
        display: inline-block;
        right: 0px;
        input[type="checkbox"] {
          cursor: pointer;
        }
      }
    }
    li:hover {
      background: rgba(255, 138, 61, 0.7);
    }
    .is-selected-status {
      background: $activeColor;
    }
  }
}
.data-table {
  z-index: 1000;
  p.title {
    background: none;
    font-size: 13px;
    padding: 0 10px;
    height: auto;
    line-height: 2;
    color: #40a2de;
  }
}
</style>
<style rel='stylesheet' lang='scss'>
@import "../css/rule.scss";
.layer-data-macro .el-collapse-item__wrap {
  border: none;
}
$activeColor: #eaf1fb;
.base-layer {
  .el-slider__bar {
    background: $borderColorActive;
  }
  .el-slider__button-wrapper {
    width: 14px;
    height: 14px;
    top: -6px;
  }
  .el-slider__button {
    width: 14px;
    height: 14px;
  }
  .el-slider__runway {
    margin: 12px 0;
    height: 4px;
  }
  .el-slider__bar {
    height: 4px;
  }
}
#layerControl_zw {
  background: $panelContentBg;
  .title {
    background: $panelTitleBg;
    color: $fontColor;
  }
  .base-layer-layers {
    .text {
      color: $fontColorLimit;
    }
  }
  .other-title {
    color: $fontColorLimit;
  }
  .other-layer-layers{
    .el-input{
      input{
        background: #17809a !important;
        color: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
    }
  }
}
#layerControl_zw {
  .el-collapse {
    .el-collapse-item {
      .el-collapse-item__header {
        padding-left: 10px;
        height: 29px;
        display: block;
        width: 100%;
        line-height: 29px;
        position: relative;
        .check-box {
          margin-right: 50px;
          float: right;
          line-height: 29px;
          display: flex;
          align-items: center;
          i {
            margin-left: 4px;
          }
        }
        .el-collapse-item__arrow {
          float: right;
          line-height: 29px;
          position: absolute;
          right: 13px;
        }
      }
      .el-collapse-item__content {
        padding-left: 10px;
      }
    }
  }
}
.select {
  .el-input--mini .el-input__inner {
    background: #17809a !important;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}
#layerControl_zw {
  .el-collapse {
    border-top: 0px solid #ebeef5;
    border-bottom: 0px solid #ebeef5;
    .el-collapse-item {
      .el-collapse-item__header {
        padding-left: 10px;
        height: 29px;
        display: inline-block;
        width: 100%;
        line-height: 29px;
        position: relative;
        box-sizing: border-box;
        background: none;
        color: $fontColorLimit;
        border: 1px solid $listBorderBottom;
        .check-box {
          margin-right: 40px;
          float: right;
          line-height: 29px;
          cursor: pointer;
          padding: 0 10px;
        }
        .el-collapse-item__arrow {
          float: right;
          line-height: 29px;
          position: absolute;
          right: 10px;
        }
      }
      .el-collapse-item__header.is-active {
        color: $fontColorActive;
      }
      .el-collapse-item__wrap {
        background: none;
      }
      .el-collapse-item__content {
        padding-left: 10px;
      }
    }
  }
}

#layerControl_zw
  .el-collapse
  .el-collapse-item
  .el-collapse-item__header.is-active {
  color: #2edaff;
}
.el-popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: rgba(23, 128, 154, 0.8);
}
.el-popper[x-placement^="top"] .popper__arrow {
  border-top-color: rgba(23, 128, 154, 0.8);
}
</style>

